<template>
  <!-- 收款 -->
  <div class="main-content-container">
    <div ref="search" style="padding-bottom:10px">
      <el-row>
        <el-col :span="14" class="searchs-y">
          <el-form ref="searchs" label-width="80px" :inline="true">
            <el-form-item>
              <el-input v-model="custQuery" placeholder="姓名、手机号、编号" clearable @change="handleChange">
                <el-button slot="append" icon="el-icon-search" @click="handleChange" />
              </el-input>
              <el-button v-if="false" type="text" style="line-height: 27px; margin-left:10px;" @click="eliminate">清除</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-col :span="14">
            <Search
              :data="selections"
              :attribute="'createdTime'"
              @change="handleTypeChange"
              @dateChange="handleDateChange"
            />
          </el-col>
        </el-col>
        <el-col class="margin-top">
          <Tabs
            v-model="query.paymentStatu"
            :data="datas"
            @change="datasChange"
          />
        </el-col>
      </el-row>
    </div>
    <div class="box-show" :style="'height:'+ (innerHeight + 92) + 'px'">
      <el-table :data="list" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column label="收款单号" prop="dataCode" :show-overflow-tooltip="true" />
        <el-table-column label="顾客" prop="customerName" :show-overflow-tooltip="true" />
        <el-table-column label="业务单类型" prop="paymentType" :show-overflow-tooltip="true" />
        <el-table-column label="业务单号" prop="orderCode" :show-overflow-tooltip="true" />
        <el-table-column label="收款类型" prop="payType" :show-overflow-tooltip="true" />
        <el-table-column label="收款金额" prop="orderAmount" :show-overflow-tooltip="true" />
        <el-table-column label="开单时间" prop="createdTime" :show-overflow-tooltip="true" />
        <el-table-column label="开单人" prop="drawer" :show-overflow-tooltip="true" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              v-if="row.paymentStatu === '待收款'"
              type="text"
              @click="collection(row, true)"
            >收款</el-button>
            <el-button
              v-if="row.paymentStatu !== '待收款'"
              type="text"
              @click="collection(row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :page-num="queryParams.page"
        :page-size="queryParams.pageSize"
        :on-change="handlePaginationChange"
        :total="total"
      />
    </div>
    <CollectionProp
      :visible.sync="visible"
      :current-row.sync="currentRow"
      @close="handleClose"
      @success="successHandle"
    />
    <collection
      :visible.sync="visibleDetails"
      :current-row.sync="currentRow"
      @close="handleClose"
      @success="successHandle"
    />
  </div>
</template>
<script>
import Search from "@/components/Search";
import { selections as searchSelections } from "@/config";
import { selections } from "@/config";
import CollectionProp from "./collectionProp";
import collection from "./collection";
import { tableColor, labelHeigh } from '@/utils/common.js';
import Tabs from "@/components/SearchSelection";

export default {
  components: {
    Search,
    CollectionProp,
    collection,
    Tabs,
  },
  data() {
    return {
      searchSelections,
      tableColor,
      innerHeight: null,
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      orderTypeList: [
        { id: 0, value: "不限业务单类型" },
        { id: 1, value: "订单" },
        { id: 2, value: "充值单" },
        { id: 3, value: "处方单" },
        { id: 4, value: "住院单" },
      ],
      collectionTypeList: [
        { id: 0, value: "不限收款类型" },
        { id: 1, value: "定金" },
        { id: 2, value: "全款" },
      ],
      total: 0,
      visible: false,
      visibleDetails: false,
      reveal: false,
      selections,
      query: {
        payType: "尾款",
        paymentStatu: "待收款",
      },
      datas: [
        { id: "全部", name: "全部" },
        { id: "待收款", name: "待收款" },
        // { id: 2, name: '待退款' },
        { id: "已收款", name: "已收款" },
        { id: "已取消", name: "已取消" },
        // { id: 4, name: '已退款' },
      ],
      list: [],
      currentRow: {},
      custQuery: "",
    };
  },
  computed: {},
  mounted() {
    this.getList();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    handleChange() {
      this.queryParams.page = 1;
      this.getList();
    },
    async getList() {
      const query = JSON.parse(JSON.stringify(this.query));
      if (query.paymentStatu === "全部") query.paymentStatu = undefined;
      if (!query.createdTime) {
        const date = new Date();
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const beginTime = year + "-" + month + "-" + day + " 00:00:00";
        const endTime = year + "-" + month + "-" + day + " 23:59:59";
        query.timeType = "today";
        query.createdTime = beginTime + "_" + endTime;
      }
      const res = await this.$api["financialCenter/checkstand/getPayment"]({
        ...this.queryParams,
        query: query,
        custQuery: this.custQuery,
      });
      if (res.code !== 200) return;
      this.list = res.data.result;
      this.total = res.data.total;
    },
    handlePaginationChange(pagination) {
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.getList();
    },
    handleDateChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    handleTypeChange(item) {
      this.queryParams.page = 1;
      Object.assign(this.query, item);
      this.getList();
    },
    datasChange(item) {
      this.queryParams.page = 1;
      this.$set(this.query, "paymentStatu", item);
      this.getList();
    },
    searchBtn() {
      const val = this.query.name;
      if (!val) return false;
      const json = {};
      if (val.length < 10) {
        json.customerName = val;
      } else if (val.length === 11) {
        const res = /^1\d{10}$/;
        if (res.test(val)) {
          json.customerPhone = val;
        } else {
          this.$message.error("请输入正确得手机号码");
        }
      } else {
        json.customerCode = val;
      }
      Object.assign(this.query, json);
      this.queryParams.page = 1;
      this.getList();
    },
    async collection(row, isCollection) {
      const res = await this.$api[
        "financialCenter/checkstand/getPaymentDateils"
      ]({ id: row.id });
      if (res.code !== 200) return;
      this.currentRow = res.data;
      if (isCollection) {
        this.visible = true;
      } else {
        this.visibleDetails = true;
      }
    },
    handleClose() {
      this.visible = false;
      this.visibleDetails = false;
    },
    successHandle() {
      this.queryParams.page = 1;
      this.handleClose();
      this.getList();
    },
    async cancelCollection(row) {
      const confirmResult = await this.$confirm("请确认是否取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消操作");
      }
      const res = await this.$api["financialCenter/checkstand/cancelPayment"]({
        id: row.id,
      });
      if (res.code !== 200) return this.$message.error(res.msg);
      this.$message.success("取消成功");
      this.getList();
    },
    eliminate() {
      this.custQuery = "";
      this.query = {};
      this.queryParams.page = 1;
      this.getList();
    },
  },
};
</script>
<style scoped lang="scss">
.margin-top {
  margin-top: 10px;
}
</style>
